<template>
  <div class="container">
   {{ name }} {{ age }}
 <button @click="updateName">修改姓名</button>

  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",

  setup() {
    //ref 直接定义成简单数据类型  就不用再使用 toRef toRefs 展开啦
   //  ref常用于定义简单类型  响应式数据
   // 其实也可以定义复杂数据类型的响应式数据
   // reactive 只能 处理复杂数据类型 不用点value
   // 当不能确定后台返回的是简单还是负责数据类型的时候
   // 用ref 包裹接收。 要注意用的时候要点value
    const name = ref("ls");
    const age = ref(18);
    console.log(name);
    const updateName=()=>{
      name.value='zs'
    }
    return {
      name,
      age,
      updateName
    };
  },
};
</script>

<style>
</style>